<template>
  <div>
    <ElSelect v-model="language" value-key="plid" @change="linkQuery" v-loading="loading">
      <ElOption v-for="d in list" :key="d.plid" :value="d" :label="d.lname"></ElOption>
    </ElSelect>

    <ElSelect v-model="cource" value-key="lcid" v-loading="loading">
      <ElOption v-for="d in linklist" :key="d.lcid" :value="d" :label="d.cname"></ElOption>
    </ElSelect>

    <span> 结果：{{ language.lname }}-{{ cource.cname }} </span>
  </div>
  <hr />
  <div>
    <ElTable :data="linklist" v-loading="loading">
      <ElTableColumn label="编号" prop="lcid"></ElTableColumn>
      <ElTableColumn label="课程名称" prop="cname"></ElTableColumn>
      <ElTableColumn label="课程信息" prop="cinfo"></ElTableColumn>
      <ElTableColumn label="信息最后修改时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.lastupdate) }}
        </template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>
<script setup lang="ts">
//#region  基础导入和变量
// vue核心
import { ref } from 'vue'
// 饿了么组件
import { ElMessage, ElSelect, ElOption, ElTable, ElTableColumn } from 'element-plus'
import { ApiService } from '../../ts/ApiService'
import { BaseDataResult } from '../../ts/types/BaseResult'
import { TbProgramLanguage, TbLanguageCource } from '../../ts/types/Link'
import Tools from '../../ts/Tools'
const loading = ref(false)
//#endregion

//#region 省份查询
const list = ref([] as Array<TbProgramLanguage>)
const language = ref({} as TbProgramLanguage)
const query = () => {
  loading.value = true
  ApiService.get('/link/languages', {}, (data: BaseDataResult<Array<TbProgramLanguage>>) => {
    loading.value = false
    if (data.success) {
      list.value = data.data
      language.value = data.data[0]
      linkQuery()
    } else {
      ElMessage.error(data.message)
    }
  })
}

query()

//#endregion

//#region 城市查询
const linklist = ref([] as Array<TbLanguageCource>)
const cource = ref({} as TbLanguageCource)
const linkQuery = () => {
  loading.value = true
  ApiService.get(`/link/cource/${language.value.plid}`, {}, (data: BaseDataResult<Array<TbLanguageCource>>) => {
    loading.value = false
    if (data.success) {
      linklist.value = data.data
      cource.value = data.data[0]
    } else {
      ElMessage.error(data.message)
    }
  })
}

//#endregion
</script>
<style scoped lang="scss"></style>
